<template>
  <hips-view>
    <hips-nav-bar slot="header" title="Login"> </hips-nav-bar>

    <hips-input :d-field="dsx.records.at(0).getField('account')"></hips-input>

    <hips-input :d-field="dsx.records.at(0).getField('password')"></hips-input>

    <hips-button
      @click="login"
      block
      type="primary"
      :loading="dsx.status !== 'ready'"
      >Login</hips-button
    >
  </hips-view>
</template>

<script>
import Dsx from '@hips/plugin-dataset-vuex';

import axios from 'axios'

import { View, NavBar, Button, Input } from '@hips/vue-ui';

export default {
  name: 'login',
  data() {
    const _this = this;

    const axiosInstance = axios.create()

    axiosInstance.defaults.baseURL = 'http://localhost:4000'
    return {
      dsx: new Dsx({
        moduleName: 'user',
        autoCreate: true,
        axios: axiosInstance,
        fields: [
          {
            name: 'account',
            label: '账号',
            type: 'text',
            placeholder: '请输入账号',
            required: true,
            validateOn: 'blur',
            showErrorMessage: true,
            validationMessages: {
              required: '必填',
            },
            emits: {
              blur: () => {
                console.log('blur');
              },
            },
          },
          {
            name: 'password',
            label: '密码',
            type: 'password',
            placeholder: '请输入密码',
            required: true,
            showErrorMessage: true,
            validationMessages: {
              required: '必填',
            },
          },
        ],
        submitUrl: '/user/login',
        events: {
          submitSuccess() {
            _this.$dsxRouter.replace({ name: 'main' });
          },
          submitFailed(error) {
            _this.$hips.toast(`登录失败: ${error.data}`);
          },
        },
        getters: {
          getUserInfo: (state) => (params) => {
            const { userId } = params;
            console.log('userId = ', userId);            
            return state.userInfo;
          },
        },
      }),
    };
  },
  mounted() {
    this.$dsxFetch.fetch.get('https://www.baidu.com').then(() => {
      console.log('get baidu');
    });

    this.dsx.setState('curr', 'str');
  },
  components: {
    [View.name]: View,
    [NavBar.name]: NavBar,
    [Button.name]: Button,
    [Input.name]: Input,
  },
  methods: {
    async login() {
      this.dsx.records.submit();
    },
  },
};
</script>

<style scoped></style>
